import React, { useState } from 'react';

import { Space, Select } from 'antd';

import { fetchTargetData } from '@/pages/scale/service/target';

const { Option } = Select;

function TargetSetting() {
  // 目前只有支援兩個量表
  const scales = [
    {
      code: 'S0062',
      name: '心智障碍儿童个别化教育课程评量表',
    },
    {
      code: 'S0075',
      name: '早期疗育课程评量',
    },
  ];

  const [data, setData] = useState([]);

  const loadTargetData = async (code) => {
    setData(await fetchTargetData(code));
  };

  console.log(data);

  return (
    <>
      <Space direction="vertical">
        <Select
          style={{ width: 300 }}
          onChange={(changeValue) => {
            loadTargetData(changeValue);
          }}
        >
          {scales.map((i) => (
            <Option key={i.code} value={i.code}>
              {i.name}
            </Option>
          ))}
        </Select>
      </Space>
    </>
  );
}

export default TargetSetting;
